<template>
  <div>
    <el-row type="flex" justify="space-between">
      <el-col :xs="12" :sm="8" :md="6" :lg="4">
        <div class="grid-content bg-purple">
          <el-link type="primary" :underline="false" href="/home/#/index"
            ><i class="fa fa-home"></i>&nbsp;发版系统</el-link
          >
        </div>
      </el-col>
      <el-col :xs="12" :sm="8" :md="6" :lg="4">
        <span class="userinfo">
          <i class="fa fa-user"></i>
          {{ username }}
          &nbsp;&nbsp;
          <i class="fa fa-sign-out" @click="logout()"></i>
        </span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Constants from "@/components/util/Constants";
import { logout } from "@/components/api/header";

export default {
  name: "Header",
  data() {
    return {
      username: sessionStorage.getItem(Constants.USER_NAME),
    };
  },
  methods: {
    logout() {
      this.$confirm("确认关闭？")
        .then((_) => {
          let token = { token: sessionStorage.getItem(Constants.TOKEN) };
          logout(token, () => {
            sessionStorage.removeItem(Constants.TOKEN);
            sessionStorage.removeItem(Constants.USER_NAME);
            this.$router.replace(Constants.LOGIN);
          });
        })
        .catch((_) => {});
    },
  },
};
</script>

<style>
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

/** 覆盖el-link 默认字体 */
.el-link--inner {
  font-size: 16px;
}

.userinfo {
  font-family: "Helvetica";
  font-size: 20px;
  font-weight: bold;
}
</style>
